<template>
  <div>
    <Breadcrumb>
      <BreadcrumbItem>首页</BreadcrumbItem>
      <BreadcrumbItem>提现管理</BreadcrumbItem>
    </Breadcrumb>
   <div>
     <div style="display: flex;margin-top: 20px;">
       <div style="font-size: 22px;">
         <div class="addmargin">
           <p><span>可提现余额：0.00元</span><Button type="primary" @click="search" style="margin-right: 10px"
           >$ 提现</Button
           ></p>
         </div>
         <div class="addmargin">
           <p><span>微信余额：0.00</span><span>支付宝余额：0.00</span></p>
         </div>
         <div class="addmargin">
           <span style="font-size: 14px;">温馨提示：您可以设置由系统自动帮你提现。</span>
          <Button style="margin-left: 20px;">自动提现设置</Button>
         </div>
       </div>
       <div class="centerline"></div>
       <div style="font-size: 22px;margin-left: 20px;">
       <div class="addmargin"><p>已提现余额：0.00元</p></div>
       <div class="addmargin"><p><span>微信余额：0.00</span><span>支付宝余额：0.00</span></p></div>
      </div>
     </div>
<!--     图表部分-->
     <Tabs type="card">
       <TabPane label="可提现余额">
         <Form ref="formInline" :model="request" inline>
           <FormItem>
             工单时间:<DatePicker
             type="daterange"
             v-model="params.device_time"
             @on-change="timechange"
             :transfer="true"
             placement="bottom-end"
             placeholder="请选择开始-结束时间"
             style="width: 200px"
           ></DatePicker>
           </FormItem>
           <FormItem>
             工单号:<Input type="text" clearable placeholder="请输入工单号" style="width: 120px;" />
           </FormItem>
           <FormItem>
             支付号:<Input type="text" clearable placeholder="请输入工单号" style="width: 120px;" />
           </FormItem>
           <FormItem>
             <Button type="primary" @click="search" style="margin-right: 10px"
             >搜索</Button
             >
             <Button type="success" @click="search" style="margin-right: 10px"
             >导出</Button
             >
           </FormItem>
           <div>
             <RadioGroup value="first" type="button" size="large" @on-change="waitCount">
               <Radio label="first">汇总成功</Radio>
               <Radio label="second">待汇总</Radio>
             </RadioGroup>
             <RadioGroup v-model="button5" type="button" size="large" @on-change="normalEnter">
               <Radio label="normal">正常汇入</Radio>
               <Radio label="adds">补汇</Radio>
             </RadioGroup>
           </div>
<!--           点击待汇总以后出来一个表格-->
           <div v-if="current1==='second'" >
             <Table :columns="columns2" :data="data2"></Table>
           </div>
<!--&lt;!&ndash;           点击补汇以后出来一个表格&ndash;&gt;-->
<!--           <div v-if="current2==='adds'" >-->
<!--             <Table :columns="columns3" :data="data3"></Table>-->
<!--           </div>-->
           <div style="margin-top: 20px;font-size: 22px;" v-if="current1==='first'">
             <Divider type="vertical" />
             <span>余额总额:0 元</span>
             <Divider type="vertical" />
             <span>微信总额:0 元</span>
             <Divider type="vertical" />
             <span>支付宝总额:0 元</span>
           </div>
           <Table :columns="columns1" :data="data" style="margin-top: 20px;" v-if="current1==='first'"></Table>
           <Page style="display: flex;justify-content: center;margin-top: 24px;" :total="page.count" :page-size="20" :page-size-opts="[20,30,40,50,100]" show-elevator show-sizer show-total
                 @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange" />
         </Form>
       </TabPane>
       <TabPane label="已提现余额">
         <Form ref="formInline" :model="request" inline>
           <FormItem>
             支付时间:<DatePicker
             type="daterange"
             v-model="params.device_time"
             @on-change="timechange"
             :transfer="true"
             placement="bottom-end"
             placeholder="请选择开始-结束时间"
             style="width: 200px"
           ></DatePicker>
           </FormItem>
           <FormItem>
             工单号:<Input type="text" clearable placeholder="请输入工单号" style="width: 120px;" />
           </FormItem>
           <FormItem>
             <Button type="primary" @click="search" style="margin-right: 10px"
             >搜索</Button
             >
             <Button type="success" @click="search" style="margin-right: 10px"
             >导出</Button
             >
           </FormItem>
           <Table :columns="columns1" :data="data" style="margin-top: 20px;"></Table>
           <Page style="display: flex;justify-content: center;margin-top: 24px;" :total="page.count" :page-size="20" :page-size-opts="[20,30,40,50,100]" show-elevator show-sizer show-total
                 @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange" />
         </Form>
       </TabPane>
     </Tabs>
   </div>
<!--    <div style="display: flex; justify-content: center; margin-top: 24px">-->
<!--      <Page style="display: flex;justify-content: center;margin-top: 24px;" :total="page.count" :page-size="20" :page-size-opts="[20,30,40,50,100]" show-elevator show-sizer show-total-->
<!--            @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange" />-->

<!--    </div>-->
  </div>


</template>

<script>
  export default {
    data() {
      return {
        // 设置默认选中项
        current1: 'first',
        current2: 'normal',
        // 设置字样选中
        // button4: 'first',
        button5: 'normal',
        params: {
          device_time: [],
          status: 1,
          user_id: "",
          order_id: "",
          activity_id: "",
          page: 1,
          limit: 10,
        },
        total: 0,
        page: {},
        height: this.$store.state.height,
        modal1: false,
        modal3: false,
        columns1: [
          {
            title: "时间",
            key: "times",
            minWidth: 150,
            align: "center"
          },
          {
            title: "工单号",
            key: "id",
            minWidth: 300,
            align: "center"
          },
          {
            title: "处理状态",
            key: "status",
            minWidth: 150,
            align: "center"
          },

          {
            title: "打款账户",
            key: "payment",
            minWidth: 150,
            align: "center",
          },
          {
            title: "收款账户",
            key: "back_account",
            minWidth: 150,
            align: "center",
          },
          {
            title: "提现总金额",
            key: "all_money",
            minWidth: 150,
            align: "center",
          },
          {
            title: "提现手续费",
            key: "",
            minWidth: 150,
            align: "center",
          },
          {
            title: "微信金额",
            slot: "wx",
            minWidth: 160,
            align: "center",
          },
          {
            title: "支付宝金额",
            key: "zkb",
            minWidth: 150,
            align: "center",
          }
        ],
        columns2: [
          {
            title: "支付时间",
            key: "times",
            minWidth: 150,
            align: "center"
          },
          {
            title: "账单类型",
            key: "id",
            minWidth: 300,
            align: "center"
          },
          {
            title: "支付渠道",
            key: "status",
            minWidth: 150,
            align: "center"
          },
          {
            title: "订单号",
            key: "id",
            minWidth: 300,
            align: "center"
          },
          {
            title: "支付号",
            key: "status",
            minWidth: 150,
            align: "center"
          },
          {
            title: "金额",
            key: "status",
            minWidth: 150,
            align: "center"
          }
          ],
        data: [],
        data1: [
          {
            id: 1,
            title: "机器组3",
          },
          {
            id: 2,
            title: "机器组4",
          },
        ],
        data2: [],
        // 补汇下表格中的数据
        // columns3: [
        //   {
        //     title: "工单生成时间",
        //     key: "times",
        //     minWidth: 150,
        //     align: "center"
        //   },
        //   {
        //     title: "工单号",
        //     key: "id",
        //     minWidth: 300,
        //     align: "center"
        //   },
        //   {
        //     title: "支付号",
        //     key: "status",
        //     minWidth: 150,
        //     align: "center"
        //   },
        //   {
        //     title: "账单类型",
        //     key: "id",
        //     minWidth: 300,
        //     align: "center"
        //   },
        //   {
        //     title: "支付渠道",
        //     key: "status",
        //     minWidth: 150,
        //     align: "center"
        //   },
        //   {
        //     title: "入账状态",
        //     key: "status",
        //     minWidth: 150,
        //     align: "center"
        //   },
        //   {
        //     title: "入账完成时间",
        //     key: "overTime",
        //     minWidth: 150,
        //     align: "center"
        //   }
        // ],
        // data3: [],
        request: {
          device_number: "",
          page: 1,
        },
        role_id:null,
      };
    },
    mounted() {

      this.init();
    },
    methods: {
      // 点击待汇总以后出来一个表格
      waitCount(current1) {
        this.current1=current1;
      },

      //点击补汇以后出来一个表格
      normalEnter(current2) {
        this.current2=current2;
      },

      add3(){
        this.cancel();
        this.modal3 = true
        this.allocated = [];
        this.undistributed = [];
        if(this.infoID == 6){
          console.log('6')
          this.axios.post("device/getAllDev").then(res => {
            if (res.code == 1) {
              this.allocated = res.data.allocated;
              this.undistributed= res.data.undistributed;
            }
          });

        }
      },
      init() {
        this.axios.post("order/order_list", this.params).then((res) => {
          console.log("this.params: ", this.params);
          if (res.code == 1) {
            console.log(res);
            this.total = res.data.count;
            this.tableData = res.data.list;
          }
        });
      },
      search() {
        this.params.page = 1;
        this.init();
      },
      confirm() {
        this.modal1 = false;
        this.$Message.success("保存成功！");
        this.cancel();
      },
      cancel() {},
      add() {
        this.modal1 = true;
      },
      setStatus(id, status) {
        var text = "确定要" + (status == 1 ? "启用" : "禁用") + "此机器组么？";
        this.$Modal.confirm({
          title: text,
          onOk: () => {
            this.$Message.success("操作成功");
          },
          onCancel: () => {},
        });
      },
      lists() {},
      timechange(val) {
        console.log(val);
      },
      handleSizeChange(val) {
        this.request.page = 1;
        this.request.limit = val;
        this.lists();
      },
      handleCurrentChange(val) {
        this.params.page = val;
        this.init();
      },
    },
  };
</script>

<style>
  *{
    margin: 0;
    padding: 0;
  }
  .door_device{
    position: relative;
    top: -20px;
  }
  .vertical{
    font-size: 16px;

  }
  .centerline{
    width: 1px;
    height: 120px;
    background: #000;
    margin-left: 40px;
  }
  /*对提现管理下的文字增加上下间距*/
  .addmargin{
    margin-top: 15px;
  }


</style>
